<template>
  <dev class="page-container">
    <el-steps :active="active" align-center finish-status="success">
      <el-step title="商品信息"></el-step>
      <el-step title="商品详情"></el-step>
      <el-step title="其他设置"></el-step>
    </el-steps>
    <el-divider/>
    <div>
      <el-form :model="goodsFrom" label-width="100">
        <div v-show="active==1">
          <el-row>
            <el-col :span="12">
              <el-form-item label="商品名称">
                <el-input v-model="goodsFrom.goodsName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="商品分类">
                <el-select v-model="goodsFrom.classify" placeholder="">
                  <el-option v-for="item in menuData" :key="item" :value="item.id"
                             :label="item.classifyName"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="单位">
                <el-input v-model="goodsFrom.unit"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="商品简介">
                <el-input v-model="goodsFrom.descText"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="商品封面图">
                <el-icon v-if="!goodsFrom.titleImage" @click="openImageTitle()" size="24">
                  <Plus/>
                </el-icon>
                <el-image v-else :src="imageBase + goodsFrom.titleImage" @click="openImageTitle()"
                          style="width: 80px; height: 80px;"></el-image>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="商品轮播图">
                <el-icon v-if="!goodsFrom.bannerImage" size="24" @click="openImageBanner()">
                  <Plus/>
                </el-icon>
                <el-image v-else :src="imageBase + goodsFrom.bannerImage" @click="openImageBanner()"
                          style="width: 80px; height: 80px;"></el-image>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="商品规格">
                <el-radio label="1" v-model="goodsFrom.skuType">单规格</el-radio>
                <el-radio label="2" v-model="goodsFrom.skuType">多规格</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="佣金设置">
                <el-radio label="1" v-model="goodsFrom.isRaio">单独设置</el-radio>
                <el-radio label="2" v-model="goodsFrom.isRaio">默认设置</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="goodsFrom.skuType=='1'">
            <el-col :span="24">
              <el-table :data="goodsAttrList" border row-key="id">
                <el-table-column label="图片">
                  <template #default="scope">
                    <el-upload @click="openImage" :disabled="true" action="#" list-type="picture-card"
                               :auto-upload="false">
                      <el-icon v-if="!scope.row.image">
                        <Plus/>
                      </el-icon>
                      <el-image v-else :src="imageBase + scope.row.image" style="width: 50px; height: 50px;"></el-image>
                    </el-upload>
                  </template>
                </el-table-column>
                <el-table-column label="售价">
                  <template #default="scope">
                    <el-input v-model="scope.row.price" placeholder=""></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="成本价">
                  <template #default="scope">
                    <el-input v-model="scope.row.cost" placeholder=""></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="原价">
                  <template #default="scope">
                    <el-input v-model="scope.row.otPrice" placeholder=""></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="库存">
                  <template #default="scope">
                    <el-input v-model="scope.row.stock" placeholder=""></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="商品编号">
                  <template #default="scope">
                    <el-input v-model="scope.row.barCode" placeholder=""></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="重量（kg）">
                  <template #default="scope">
                    <el-input v-model="scope.row.weight" placeholder=""></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="体积（m³）">
                  <template #default="scope">
                    <el-input v-model="scope.row.volume" placeholder=""></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="一级返佣" v-if="goodsFrom.isRaio=='1'">
                  <template #default="scope">
                    <el-input v-model="scope.row.brokerage" placeholder=""></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="二级返佣" v-if="goodsFrom.isRaio=='1'">
                  <template #default="scope">
                    <el-input v-model="scope.row.brokerageTwo" placeholder=""></el-input>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
          <el-row v-if="goodsFrom.skuType=='2'">
            <el-col :span="8">
              <el-form-item label="选择规格" style="display: flex; align-items: center">
                <el-select v-model="goodsFrom.ruleId" placeholder="请选择规格" style="flex: 1" clearable>
                  <el-option v-for="item in ruleData" :key="item" :value="item.ruleValue"
                             :label="item.ruleName"></el-option>
                </el-select>
                <el-button type="primary" @click="confirmSelection">确定</el-button>
                <el-button @click="gotoAddSpec">添加规格</el-button>
              </el-form-item>
              <el-form-item v-for="(item,index) in ruleValue" :key="index">
                <div v-if="item.editFlag" style="display: flex;">
                  <el-col :span="10">
                    <el-form-item label="规格">
                      <el-input style="width: 150px;" v-model="item.tempValue" placeholder="规格"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="规格值">
                      <el-input style="width: 150px;" v-model="item.detail" placeholder="规格值"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-button type="primary" @click="setItemRule(index,item)">确定</el-button>
                    <el-button @click="delItemRule(index)">取消</el-button>
                  </el-col>
                </div>
                <div v-else style="display: flex;">
                  <el-form-item label=" ">
                    <el-row>
                      <el-col :span="24">
                        <el-text>
                          {{ item.value }}
                          <el-icon @click="delItemRule(index)">
                            <CircleClose/>
                          </el-icon>
                        </el-text>
                      </el-col>
                      <el-col :span="24">
                        <el-tag v-for="(tag,tIndex) in item.detail" @close="handleTagClose(tIndex,item)" :key="tIndex"
                                :type="tag.type" style="margin-right: 5px; closable">
                          {{ tag }}
                        </el-tag>
                        <el-input v-model="item.addDetail" style="width: 80px;" v-if="item.addFlag" placeholder=""
                                  @blur="saveDetail(item)"></el-input>
                        <el-button v-else icon="Plus" size="mini" style="margin-left: 5px;" @click="addDetail(item)">
                          添加
                        </el-button>
                      </el-col>
                    </el-row>
                  </el-form-item>
                </div>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="addRuleValue" v-if="isShow">添加新规则</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item v-if="hasValidSpec" label="批量设置">
                <el-table :data="batchAttrList" border>
                  <el-table-column label="图片">
                    <template #default="scope">
                      <el-upload @click="openImage" :disabled="true" action="#" list-type="picture-card"
                                 :auto-upload="false">
                        <el-icon v-if="!scope.row.image">
                          <Plus/>
                        </el-icon>
                        <el-image v-else :src="imageBase + scope.row.image"
                                  style="width: 50px; height: 50px;"></el-image>
                      </el-upload>
                    </template>
                  </el-table-column>
                  <el-table-column label="售价">
                    <template #default="scope">
                      <el-input v-model="scope.row.price" placeholder=""></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="成本价">
                    <template #default="scope">
                      <el-input v-model="scope.row.cost" placeholder=""></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="原价">
                    <template #default="scope">
                      <el-input v-model="scope.row.otPrice" placeholder=""></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="库存">
                    <template #default="scope">
                      <el-input v-model="scope.row.stock" placeholder=""></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="商品编号">
                    <template #default="scope">
                      <el-input v-model="scope.row.barCode" placeholder=""></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="重量（kg）">
                    <template #default="scope">
                      <el-input v-model="scope.row.weight" placeholder=""></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="体积（m³）">
                    <template #default="scope">
                      <el-input v-model="scope.row.volume" placeholder=""></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="一级返佣" v-if="goodsFrom.isRaio=='1'">
                    <template #default="scope">
                      <el-input v-model="scope.row.brokerage" placeholder=""></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="二级返佣" v-if="goodsFrom.isRaio=='1'">
                    <template #default="scope">
                      <el-input v-model="scope.row.brokerageTwo" placeholder=""></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作">
                    <template #default="scope">
                      <el-button type="success" @click="handleBatchUpdate" :disabled="!hasValidSpec">批量添加</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item v-if="hasValidSpec" label="商品属性">
                <el-table :data="skuAttrList" border>
                  <el-table-column v-for="(specItem, specIndex) in ruleValue" :key="specIndex" :label="specItem.value">
                    <template #default="scope">
                      {{ scope.row.specs[specIndex]?.value || '' }}
                    </template>
                  </el-table-column>
                  <el-table-column label="图片">
                    <template #default="scope">
                      <el-upload @click="openImage" :disabled="true" action="#" list-type="picture-card"
                                 :auto-upload="false">
                        <el-icon v-if="!scope.row.image">
                          <Plus/>
                        </el-icon>
                        <el-image v-else :src="imageBase + scope.row.image"
                                  style="width: 50px; height: 50px;"></el-image>
                      </el-upload>
                    </template>
                  </el-table-column>
                  <el-table-column label="售价">
                    <template #default="scope">
                      <el-input v-model="scope.row.price" placeholder=""></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="成本价">
                    <template #default="scope">
                      <el-input v-model="scope.row.cost" placeholder=""></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="原价">
                    <template #default="scope">
                      <el-input v-model="scope.row.otPrice" placeholder=""></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="库存">
                    <template #default="scope">
                      <el-input v-model="scope.row.stock" placeholder=""></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="商品编号">
                    <template #default="scope">
                      <el-input v-model="scope.row.barCode" placeholder=""></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="重量（kg）">
                    <template #default="scope">
                      <el-input v-model="scope.row.weight" placeholder=""></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="体积（m³）">
                    <template #default="scope">
                      <el-input v-model="scope.row.volume" placeholder=""></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="一级返佣" v-if="goodsFrom.isRaio=='1'">
                    <template #default="scope">
                      <el-input v-model="scope.row.brokerage" placeholder=""></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="二级返佣" v-if="goodsFrom.isRaio=='1'">
                    <template #default="scope">
                      <el-input v-model="scope.row.brokerageTwo" placeholder=""></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作">
                    <template #default="scope">
                      <el-button type="danger" @click="handleDeleteSku(scope.$index)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div v-if="active==2">
          <el-row>
            <el-col :span="24">
              <el-form-item label="商品详情">
                <!-- 工具栏 -->
                <Toolbar
                    id="toolbar-container"
                    :editor="editorRef"
                    :default-config="toolbarConfig"
                    :mode="mode"
                />
                <!-- 编辑器 -->
                <Editor
                    id="editor-container"
                    style="width: 100%;border: #cbc7c7 solid 1px;margin-bottom: 50px;"
                    v-model="goodsFrom.goodsDetail"
                    :default-config="editorConfig"
                    :mode="mode"
                    @on-change="handleChange"
                    @on-created="handleCreated"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div v-show="active==3">
          <el-row>
            <el-col :span="8">
              <el-form-item label="排序">
                <el-input-number v-model="goodsFrom.sort" :min="1" :max="1000"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="积分">
                <el-input-number v-model="goodsFrom.points" :min="1" :max="1000"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="虚拟销量">
                <el-input-number v-model="goodsFrom.number"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="商品推荐">
                <el-checkbox label="1">是否热卖</el-checkbox>
                <el-checkbox label="2">热门榜单</el-checkbox>
                <el-checkbox label="3">促销</el-checkbox>
                <el-checkbox label="4">精品推荐</el-checkbox>
                <el-checkbox label="5">首发新品</el-checkbox>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="活动优先级">
                <span class="spantui" style="background:red">默认</span>
                <span class="spantui" style="background:#1e9fff">秒杀</span>
                <span class="spantui" style="background:#009688">活动</span>
                <span class="spantui" style="background:#feb900">拼团</span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

      </el-form>
    </div>
    <el-row style="margin-top: 50px;">
      <el-col :span="24" style="text-align: center;">
        <el-button type="" @click="up" v-if="active>1">上一步</el-button>
        <el-button type="primary" @click="last" v-if="active<3">下一步</el-button>
        <el-button type="primary" v-if="active==3" @click="submitFrom">保存</el-button>
      </el-col>
    </el-row>
    <el-dialog title="选择图片" width="70%" v-model="dialogImgVisible">
      <material v-if="dialogImgVisible" @updateValue="selectValue" flag="1"></material>
    </el-dialog>
  </dev>

  <el-dialog v-model="dialogVisible" title="新增规格" width="60%" :before-close="handleClose">
    <rule v-if="dialogVisible" @updateValue="updateValue"></rule>
    <template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="submitRule">提交</el-button>
			</span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="searchTitle">
import '@wangeditor/editor/dist/css/style.css'
import {computed, onMounted, ref, shallowRef, watch} from 'vue';
import {useRoute} from "vue-router";
import {Editor, Toolbar} from "@wangeditor/editor-for-vue";
import {goodsAddOrUpdate, upload} from "@/api/goods/goodsManage"
import material from '../goods/material.vue'
import {classifyList} from '@/api/goods/goodsClassify'
import router from "@/router";
import {ElMessage} from 'element-plus';
import {CircleClose} from '@element-plus/icons-vue'
import {addOrUpdateRule, ruleAll} from "@/api/goods/goodsRule.ts";
import Rule from "@/views/goods/component/rule.vue";

const isShow = ref(true)
const ruleValue = ref([] as any[])
const dialogVisible = ref(false)

const flag = ref(1)
const dialogImgVisible = ref(false)
const editorRef = shallowRef();
const modelValue = ref('');
const mode = ref("default"); // 编辑器模式
const toolbarConfig = ref({}); // 工具条配置
const imageBase = 'http://localhost:8080/profile/'
// 编辑器配置
const editorConfig = {
  placeholder: '请输入内容...',
  MENU_CONF: {
    uploadImage: {
      // 自定义图片上传
      async customUpload(file: any, insertFn: any) {
        //上传文件接口请求
        upload(file).then((response: any) => {
          //返回图片地址
          const url = imageBase + response.data;
          //将图片地址作为参数传入富文本组件的的方法中
          insertFn(url);
        });
      },
    },
  },
}

//接收前一个页面的参数
const route = useRoute()
console.log("route", route)

const menuData = ref([])
const ruleData = ref([])
const activeName = ref('sell')
const active = ref(1)

const batchAttrList = ref([{
  image: null,
  id: null,
  goodsId: null,
  stock: null,
  suk: null,
  price: null,
  cost: null,
  barCode: null,
  otPrice: null,
  weight: null,
  volume: null,
  brokerage: null,
  brokerageTwo: null,
  attrValue: null
}])
const goodsAttrList = ref([{
  image: null,
  id: null,
  goodsId: null,
  stock: null,
  suk: "默认",
  price: null,
  cost: null,
  barCode: null,
  otPrice: null,
  weight: null,
  volume: null,
  brokerage: null,
  brokerageTwo: null,
  attrValue: "{\"规格\":\"默认\"}"
}])
const skuAttrList = ref([{
  image: null,
  id: null,
  goodsId: null,
  stock: null,
  suk: null,
  price: null,
  cost: null,
  barCode: null,
  otPrice: null,
  weight: null,
  volume: null,
  brokerage: null,
  brokerageTwo: null,
  attrValue: null
}])

const goodsFrom = ref({
  goodsName: null,
  classify: null,
  unit: null,
  descText: null,
  titleImage: null,
  bannerImage: null,
  skuType: "1",
  isRaio: "2",
  goodsDetail: null,
  sort: 0,
  points: 0,
  number: 0,
  recommend: null,
  activity: null,
  ruleId: null,
  goodsAttrValueList: [] as any[]
})

// 批量更新商品属性
const handleBatchUpdate = () => {
  if (batchAttrList.value.length === 0) return

  // 获取批量设置的值（取第一条）
  const batchValues = batchAttrList.value[0]

  // 更新所有SKU属性
  skuAttrList.value = skuAttrList.value.map(sku => ({
    ...sku,
    price: batchValues.price || sku.price,
    cost: batchValues.cost || sku.cost,
    otPrice: batchValues.otPrice || sku.otPrice,
    stock: batchValues.stock || sku.stock,
    barCode: batchValues.barCode || sku.barCode,
    weight: batchValues.weight || sku.weight,
    volume: batchValues.volume || sku.volume,
    brokerage: batchValues.brokerage || sku.brokerage,
    brokerageTwo: batchValues.brokerageTwo || sku.brokerageTwo
  }))
  ElMessage.success('批量设置已应用')
}

// 删除商品属性
const handleDeleteSku = (index: number) => {
  skuAttrList.value.splice(index, 1)
  ElMessage.success('删除成功')
}

// 生成笛卡尔积组合
const generateCombinations = () => {
  const validSpecs = ruleValue.value.filter(spec =>
      spec.value?.trim() &&
      spec.detail?.length > 0
  )

  if (validSpecs.length > 0) {
    const specValues = validSpecs.map(spec => spec.detail)
    const combinations = specValues.reduce(
        (acc, curr) => acc.flatMap(arr => curr.map(item => [...arr, item])),
        [[]] as string[][]
    )

    skuAttrList.value = combinations.map(combo => ({
      specs: combo.map((value, index) => ({
        specName: validSpecs[index].value,
        value: value
      })),
      ...batchAttrList.value[0]
    }))
  }
}

const hasValidSpec = computed(() =>
    ruleValue.value.some(item =>
        item.value?.trim() &&
        item.detail?.length > 0
    )
)


const userFormData = ref({
  id: null,
  ruleName: null,
  ruleValue: []
})

// 跳转至规格新增页面
const gotoAddSpec = () => {
  dialogVisible.value = true
}

//关闭弹出框
function handleClose() {
  dialogVisible.value = false
}

function updateValue(val: any) {
  userFormData.value = val.value
  console.log(userFormData)
}

function submitRule() {
  console.log(userFormData.value)
  addOrUpdateRule(userFormData.value).then((resp: any) => {
        ElMessage({message: '提交成功', type: 'success',})
        handleClose()
        ruleList()
      }
  )
}

function ruleList() {
  ruleAll({}).then((resp: any) => {
    ruleData.value = resp.data
  })
}

const confirmSelection = () => {
  if (!goodsFrom.value.ruleId) {
    ElMessage.warning('请先选择规格')
    return
  }
  const selectedRule = JSON.parse(goodsFrom.value.ruleId);
  ruleValue.value.push({
    id: selectedRule[0].value,
    value: selectedRule[0].value,
    detail: selectedRule[0].detail,
    editFlag: false
  })
}

//添加规格值
function addRuleValue() {
  ruleValue.value.push({
    value: "",
    tempValue: "",
    detail: [],
    editFlag: true,
    addFlag: false,
    addDetail: ''
  })
  isShow.value = false
}


// 删除标签
const handleTagClose = (tagIndex: number, item: any) => {
  item.detail.splice(tagIndex, 1)
}

// 添加标签
const addDetail = (item: any) => {
  item.addFlag = true
  item.addDetail = ''
}

// 保存标签
const saveDetail = (item: any) => {
  if (item.addDetail?.trim()) {
    if (!item.detail) item.detail = []
    item.detail.push(item.addDetail.trim())
  }
  item.addFlag = false
  item.addDetail = ''
}

function setItemRule(index: any, item: any) {
  item.editFlag = false
  item.value = item.tempValue
  item.detail = [item.detail]
  ruleValue.value.splice(index, 1, item)
  isShow.value = true
}

function delItemRule(index: number) {
  ruleValue.value.splice(index, 1)
  isShow.value = true
}

function submitFrom() {
  // 根据规格类型绑定不同的属性列表
  if (goodsFrom.value.skuType === '1') {
    goodsFrom.value.goodsAttrValueList = goodsAttrList.value;
  } else {
    // 多规格时需要处理规格组合数据
    goodsFrom.value.goodsAttrValueList = skuAttrList.value.map(sku => ({
      ...sku,
      suk: sku.specs.map(spec => `${spec.value}`).join(','),
      attrValue: JSON.stringify(sku.specs.reduce((acc: any, spec) => {
        acc[spec.specName] = spec.value;
        return acc;
      }, {})),
      specs: sku.specs.map(spec => ({
        specName: spec.specName,
        specValue: spec.value
      }))
    }));
  }

  if (!hasValidSpec.value && goodsFrom.value.skuType === '2') {
    ElMessage.warning('请至少配置一个有效规格');
    return;
  }
  goodsAddOrUpdate(goodsFrom.value).then((resp: any) => {
    ElMessage({message: '保存成功', type: 'success',})
    router.push({path: "/goods/manage"})
  })
}

const handleCreated = (editor: any) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

function handleChange(editor: any) {
  modelValue.value = editor.getHtml();
}

function last() {
  active.value = active.value + 1
}

function up() {
  active.value = active.value - 1
}

//选择图片回调方法
function selectValue(val: any) {
  console.log(val, flag)
  if (flag.value == 2) {
    goodsFrom.value.titleImage = val.value[0].fileName

  }
  if (flag.value == 3) {
    goodsFrom.value.bannerImage = val.value[0].fileName
  }
  dialogImgVisible.value = false
}

//打开图片选择
function openImage() {
  dialogImgVisible.value = true
}

function openImageTitle() {
  flag.value = 2
  dialogImgVisible.value = true
}

function openImageBanner() {
  flag.value = 3
  dialogImgVisible.value = true
}

function goodsClassify() {
  classifyList({}).then((resp: any) => {
    menuData.value = resp.data
  })
}

function goodsRule() {
  ruleAll({}).then((resp: any) => {
    ruleData.value = resp.data
  })
}

// 监听规格变化
watch(ruleValue, () => {
  generateCombinations()
}, {deep: true, immediate: true})


// 页面加载时
onMounted(() => {
  goodsClassify()
  goodsRule()
  generateCombinations()
});
</script>
<style lang="scss">
.page-container {
  height: 100%;
  background-color: #fff;
  padding: 10px 10px;
  display: flex;
  flex-direction: column;

  .pageContent {
    height: calc(100% - 140px);
    flex: 1;
  }
}

.el-upload {
  width: 80px;
  height: 80px;
}

.spantui {
  padding-left: 5px;
  padding-right: 5px;
  margin-right: 5px;
  color: #fff;
}
</style>
